<template>
  <h2>组合api</h2>
  <span>{{ count }} - {{ num }}</span>
  <button @click="add">btn</button>
</template>

<script>
// 如果需要有响应式，需要ref的方法
import { ref } from "vue";
export default {
  // 如果使用组合api，那么就不需要再去写options了

  // setup它是组合api的入口，同时也是生命周期
  // setup里面是没有this的
  setup() {
    const count = ref(10);
    const add = () => {
      // console.log(123);
      // console.log(count.value);
      count.value++;
    };

    // 必须要有return，只有return的内容才可以再template里面使用
    return {
      count,
      add,
    };
  },

  // setup也可以和选项api混用
  // data() {
  //   return {
  //     num: 5,
  //   };
  // },
};
</script>
